<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>月老线 - 缘分的红线，由你牵起</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 3D欢迎页 -->
        <div class="page welcome-page" id="welcome-page">
            <div class="scene">
                <div class="temple">
                    <div class="temple-roof"></div>
                    <div class="temple-body"></div>
                    <div class="temple-pillars">
                        <div class="pillar pillar-left"></div>
                        <div class="pillar pillar-right"></div>
                    </div>
                    <div class="temple-steps"></div>
                </div>
                
                <div class="yuelao-container">
                    <div class="yuelao">
                        <div class="yuelao-head"></div>
                        <div class="yuelao-body"></div>
                        <div class="yuelao-hand yuelao-hand-left"></div>
                        <div class="yuelao-hand yuelao-hand-right"></div>
                    </div>
                    <div class="speech-bubble">
                        <p>老夫掌管天下姻缘</p>
                        <p>一元一缘，助你牵手有情人</p>
                    </div>
                </div>
                
                <div class="red-thread-container">
                    <div class="red-thread thread-1"></div>
                    <div class="red-thread thread-2"></div>
                    <div class="red-thread thread-3"></div>
                </div>
                
                <div class="envelope-container">
                    <div class="envelope envelope-1">
                        <div class="envelope-face envelope-front">
                            <img src="images/profile1.jpg" alt="缘分">
                        </div>
                        <div class="envelope-face envelope-back"></div>
                        <div class="envelope-face envelope-right"></div>
                        <div class="envelope-face envelope-left"></div>
                        <div class="envelope-face envelope-top"></div>
                        <div class="envelope-face envelope-bottom"></div>
                        <div class="envelope-price">¥1</div>
                    </div>
                    <div class="envelope envelope-2">
                        <div class="envelope-face envelope-front">
                            <img src="images/profile2.jpg" alt="缘分">
                        </div>
                        <div class="envelope-face envelope-back"></div>
                        <div class="envelope-face envelope-right"></div>
                        <div class="envelope-face envelope-left"></div>
                        <div class="envelope-face envelope-top"></div>
                        <div class="envelope-face envelope-bottom"></div>
                        <div class="envelope-price">¥1</div>
                    </div>
                    <div class="envelope envelope-3">
                        <div class="envelope-face envelope-front">
                            <img src="images/profile3.jpg" alt="缘分">
                        </div>
                        <div class="envelope-face envelope-back"></div>
                        <div class="envelope-face envelope-right"></div>
                        <div class="envelope-face envelope-left"></div>
                        <div class="envelope-face envelope-top"></div>
                        <div class="envelope-face envelope-bottom"></div>
                        <div class="envelope-price">¥1</div>
                    </div>
                </div>
                
                <div class="clouds">
                    <div class="cloud cloud-1"></div>
                    <div class="cloud cloud-2"></div>
                    <div class="cloud cloud-3"></div>
                </div>
            </div>
            
            <div class="welcome-footer">
                <h1 class="app-title">月老线</h1>
                <p class="app-subtitle">一元一缘，遇见心动的TA</p>
                <div class="swipe-indicator">
                    <div class="swipe-text">向上滑动，寻找你的缘分</div>
                    <div class="swipe-arrow">
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3D主页 -->
        <div class="page main-page" id="main-page" style="display: none;">
            <div class="yuelao-header">
                <div class="yuelao-avatar">
                    <div class="avatar-3d">
                        <div class="avatar-face avatar-front"></div>
                        <div class="avatar-face avatar-back"></div>
                        <div class="avatar-face avatar-right"></div>
                        <div class="avatar-face avatar-left"></div>
                        <div class="avatar-face avatar-top"></div>
                        <div class="avatar-face avatar-bottom"></div>
                    </div>
                </div>
                <div class="yuelao-message">
                    <p class="message-text">我已为你准备了这些良缘</p>
                    <div class="message-indicator"></div>
                </div>
                <div class="user-balance">缘分币: 10</div>
            </div>
            
            <div class="temple-scene-3d">
                <div class="perspective-container">
                    <div class="rotating-shelf">
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 0)">
                            <div class="env-face env-front">
                                <img src="images/profile1.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小红</span>
                                    <span class="env-age">25岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 1)">
                            <div class="env-face env-front">
                                <img src="images/profile2.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小明</span>
                                    <span class="env-age">27岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 2)">
                            <div class="env-face env-front">
                                <img src="images/profile3.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小花</span>
                                    <span class="env-age">24岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 3)">
                            <div class="env-face env-front">
                                <img src="images/profile4.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小强</span>
                                    <span class="env-age">26岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 4)">
                            <div class="env-face env-front">
                                <img src="images/profile5.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小丽</span>
                                    <span class="env-age">23岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                        <div class="envelope-3d" onclick="showEnvelopeDetail(this, 5)">
                            <div class="env-face env-front">
                                <img src="images/profile6.jpg" alt="缘分">
                                <div class="env-info">
                                    <span class="env-name">小刚</span>
                                    <span class="env-age">28岁</span>
                                </div>
                            </div>
                            <div class="env-face env-back"></div>
                            <div class="env-face env-right"></div>
                            <div class="env-face env-left"></div>
                            <div class="env-face env-top"></div>
                            <div class="env-face env-bottom"></div>
                            <div class="env-price">¥1</div>
                        </div>
                    </div>
                </div>
                
                <div class="rotation-controls">
                    <button class="control-btn prev-btn" onclick="rotateShelf('prev')">◀</button>
                    <button class="control-btn next-btn" onclick="rotateShelf('next')">▶</button>
                </div>
            </div>
            
            <div class="action-buttons-3d">
                <div class="action-button create-button" onclick="showPage('create-envelope-page')">
                    <div class="button-3d">
                        <div class="button-face button-front">
                            <div class="button-icon">✍</div>
                            <div class="button-text">写下我的缘分</div>
                        </div>
                        <div class="button-face button-back"></div>
                        <div class="button-face button-right"></div>
                        <div class="button-face button-left"></div>
                        <div class="button-face button-top"></div>
                        <div class="button-face button-bottom"></div>
                    </div>
                </div>
                <div class="action-button browse-button" onclick="showPage('browse-page')">
                    <div class="button-3d">
                        <div class="button-face button-front">
                            <div class="button-icon">🔍</div>
                            <div class="button-text">浏览更多良缘</div>
                        </div>
                        <div class="button-face button-back"></div>
                        <div class="button-face button-right"></div>
                        <div class="button-face button-left"></div>
                        <div class="button-face button-top"></div>
                        <div class="button-face button-bottom"></div>
                    </div>
                </div>
                <div class="action-button my-button" onclick="showPage('my-envelopes-page')">
                    <div class="button-3d">
                        <div class="button-face button-front">
                            <div class="button-icon">📜</div>
                            <div class="button-text">我的缘分</div>
                        </div>
                        <div class="button-face button-back"></div>
                        <div class="button-face button-right"></div>
                        <div class="button-face button-left"></div>
                        <div class="button-face button-top"></div>
                        <div class="button-face button-bottom"></div>
                    </div>
                </div>
            </div>
            
            <div class="yuelao-quote-footer">
                <p>"千里姻缘一线牵，有缘千里来相见"</p>
            </div>
        </div>

        <!-- 信封详情弹窗 -->
        <div class="envelope-detail-modal" id="envelope-detail-modal">
            <div class="modal-content">
                <div class="modal-close" onclick="closeEnvelopeDetail()">×</div>
                <div class="envelope-preview-3d">
                    <div class="preview-image">
                        <img id="detail-image" src="images/profile1.jpg" alt="缘分详情">
                    </div>
                    <div class="preview-info">
                        <h3 id="detail-name">小红</h3>
                        <p id="detail-age">25岁</p>
                        <p id="detail-location">北京市 海淀区</p>
                        <p class="preview-description">喜欢旅行和摄影，性格开朗，希望能找到志同道合的伴侣一起探索世界...</p>
                        <div class="blur-overlay">
                            <div class="blur-text">更多内容需要打开信封查看</div>
                        </div>
                    </div>
                    <button class="buy-btn-3d" onclick="buyEnvelope()">
                        <span class="btn-front">花费1元打开信封</span>
                        <span class="btn-back"></span>
                        <span class="btn-top"></span>
                        <span class="btn-bottom"></span>
                        <span class="btn-left"></span>
                        <span class="btn-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 滑动检测
            const welcomePage = document.getElementById('welcome-page');
            let startY = 0;
            let endY = 0;
            const minSwipeDistance = 100;
            
            welcomePage.addEventListener('touchstart', function(e) {
                startY = e.touches[0].clientY;
            }, false);
            
            welcomePage.addEventListener('touchend', function(e) {
                endY = e.changedTouches[0].clientY;
                handleSwipe();
            }, false);
            
            function handleSwipe() {
                const swipeDistance = startY - endY;
                if (swipeDistance > minSwipeDistance) {
                    showPage('main-page');
                }
            }
            
            welcomePage.addEventListener('wheel', function(e) {
                if (e.deltaY > 0) {
                    showPage('main-page');
                }
            });
            
            // 3D效果 - 鼠标移动时的视差效果
            document.addEventListener('mousemove', function(e) {
                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
                
                // 欢迎页3D效果
                const scene = document.querySelector('.scene');
                if (scene) {
                    scene.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
                }
                
                // 主页3D效果
                const buttons = document.querySelectorAll('.button-3d');
                buttons.forEach(button => {
                    button.style.transform = `rotateY(${xAxis/2}deg) rotateX(${yAxis/2}deg)`;
                });
            });
            
            // 初始化旋转架
            initRotatingShelf();
        });
        
        // 页面切换
        window.showPage = function(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.style.display = 'none';
            });
            
            document.getElementById(pageId).style.display = 'block';
        }
        
        // 旋转架初始化
        let currentRotation = 0;
        let envelopesCount = 6;
        
        function initRotatingShelf() {
            const shelf = document.querySelector('.rotating-shelf');
            if (!shelf) return;
            
            // 计算每个信封的位置
            const angleIncrement = 360 / envelopesCount;
            const radius = 150; // 旋转半径
            
            const envelopes = document.querySelectorAll('.envelope-3d');
            envelopes.forEach((envelope, index) => {
                const angle = angleIncrement * index * (Math.PI / 180);
                const x = Math.sin(angle) * radius;
                const z = Math.cos(angle) * radius;
                
                envelope.style.transform = `translateX(${x}px) translateZ(${z}px) rotateY(${-angleIncrement * index}deg)`;
            });
            
            updateShelfRotation();
        }
        
        // 旋转架控制
        function rotateShelf(direction) {
            const angleIncrement = 360 / envelopesCount;
            
            if (direction === 'next') {
                currentRotation += angleIncrement;
            } else {
                currentRotation -= angleIncrement;
            }
            
            updateShelfRotation();
        }
        
        function updateShelfRotation() {
            const shelf = document.querySelector('.rotating-shelf');
            if (shelf) {
                shelf.style.transform = `rotateY(${currentRotation}deg)`;
            }
        }
        
        // 信封详情
        const envelopeProfiles = [
            { name: '小红', age: 25, location: '北京市 海淀区', image: 'images/profile1.jpg' },
            { name: '小明', age: 27, location: '上海市 浦东新区', image: 'images/profile2.jpg' },
            { name: '小花', age: 24, location: '广州市 天河区', image: 'images/profile3.jpg' },
            { name: '小强', age: 26, location: '深圳市 南山区', image: 'images/profile4.jpg' },
            { name: '小丽', age: 23, location: '成都市 武侯区', image: 'images/profile5.jpg' },
            { name: '小刚', age: 28, location: '杭州市 西湖区', image: 'images/profile6.jpg' }
        ];
        
        function showEnvelopeDetail(element, index) {
            const modal = document.getElementById('envelope-detail-modal');
            const profile = envelopeProfiles[index];
            
            document.getElementById('detail-image').src = profile.image;
            document.getElementById('detail-name').textContent = profile.name;
            document.getElementById('detail-age').textContent = profile.age + '岁';
            document.getElementById('detail-location').textContent = profile.location;
            
            modal.style.display = 'flex';
            
            // 添加3D翻转动画
            element.classList.add('flip');
            setTimeout(() => {
                element.classList.remove('flip');
            }, 1000);
        }
        
        function closeEnvelopeDetail() {
            const modal = document.getElementById('envelope-detail-modal');
            modal.style.display = 'none';
        }
        
        function buyEnvelope() {
            alert('购买成功！已解锁联系方式。');
            closeEnvelopeDetail();
        }
    </script>
</body>
</html> 